import React from 'react';
import { Anchor, Col, Row } from 'antd';
import { defaultFormatResult, useRequest } from '@/hooks';
import { getTabContainer } from '@/utils/utils';

import {
    SectionEntryFlowSetting,
    SectionEntryRemindMailSetting,
    SectionEntryAssetsSetting,
    SectionEntryMaterialsSetting,
    SectionEntryGuideNoticeSetting,
    SectionEntryTimeChangeMailSetting,
    SectionEntryLaborContractSetting,
    SectionEntryWelcomeSetting
} from './containers';
import { getEntryConfig } from '../services';

/**
 * 基础模板
 */
const EntrySettingIndex = () => {
    const { data: configData, loading, refresh } = useRequest(() => getEntryConfig(), {
        cacheKey: 'entryConfigIndex',
        ...defaultFormatResult
    });
    return (
        <Row gutter={24}>
            <Col span={19}>
                <div style={{ maxWidth: '1000px' }}>
                    <SectionEntryFlowSetting
                        id="entryFlowSetting"
                        data={configData?.entryFlowConfigs || []}
                        loading={loading}
                        onChange={refresh}
                    />
                    <SectionEntryRemindMailSetting
                        id="entryRemindMailSetting"
                        data={configData?.entryMailConfigs || []}
                        days={configData?.entryMailDayConfig?.days || 0}
                        loading={loading}
                        onChange={refresh}
                    />
                    <SectionEntryAssetsSetting
                        id="entryAssetsSetting"
                        data={configData?.entryAssetConfigs || []}
                        loading={loading}
                        onChange={refresh}
                    />
                    <SectionEntryMaterialsSetting
                        id="entryMaterialsSetting"
                        data={configData?.entryMaterialConfigs || []}
                        loading={loading}
                        onChange={refresh}
                    />
                    <SectionEntryGuideNoticeSetting
                        id="entryGuideNoticeSetting"
                        data={configData?.entryNoteConfigs || []}
                        loading={loading}
                        onChange={refresh}
                    />
                    <SectionEntryTimeChangeMailSetting
                        id="entryTimeChangeMailSetting"
                        data={configData?.entryDateChgMailConfigs || []}
                        loading={loading}
                        onChange={refresh}
                    />
                    <SectionEntryLaborContractSetting
                        id="entryLaborContractSetting"
                        data={configData?.entryContractConfigs || []}
                        loading={loading}
                        onChange={refresh}
                    />
                    <SectionEntryWelcomeSetting
                        id="entryWelcomeSetting"
                        data={configData?.entryWelcomeConfigs || []}
                        loading={loading}
                        onChange={refresh}
                    />
                </div>
            </Col>
            <Col span={4} offset={1}>
                <Anchor
                    showInkInFixed
                    targetOffset={50}
                    getContainer={() => getTabContainer() || document.querySelector('[data-anchor-container]')}
                >
                    <Anchor.Link href="#entryFlowSetting" title="入职流程配置" />
                    <Anchor.Link href="#entryRemindMailSetting" title="入职提醒邮件模板" />
                    <Anchor.Link href="#entryAssetsSetting" title="入职资产配置" />
                    <Anchor.Link href="#entryMaterialsSetting" title="入职材料配置" />
                    <Anchor.Link href="#entryGuideNoticeSetting" title="入职须知模板" />
                    <Anchor.Link href="#entryTimeChangeMailSetting" title="入职时间变更邮件模板" />
                    <Anchor.Link href="#entryLaborContractSetting" title="劳动合同模板" />
                    <Anchor.Link href="#entryWelcomeSetting" title="新员工欢迎信模板" />
                </Anchor>
            </Col>
        </Row>
    );
};

EntrySettingIndex.displayName = 'EntrySettingIndex';

export default React.memo(EntrySettingIndex);
